<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 图标 -->
			<div class="avatar_box">
				<img src="../assets/logo.png" alt="">
			</div>
			<!-- 用户名 -->
			<el-form ref="Ref" :model="loginForm" :rules="rules" label-width="0px" class="login_form">
			  <el-form-item prop="username">
			    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
			  </el-form-item>
			
			<!-- 密码 -->
			
			  <el-form-item prop="password">
			    <el-input v-model="loginForm.password" prefix-icon="el-icon-s-goods
" type="password"></el-input>
			  </el-form-item>
			<!-- 按钮区域 -->
			
			  <el-form-item class="btns">
			  	 <el-button type="primary" @click="login">登录</el-button>
			  	 <el-button type="info" @click="reset">重置</el-button>
			  </el-form-item>
			</el-form>

			
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				loginForm:{
					username:'admin',
					password:'123'
				},
				rules:{
					username:[
					 { required: true, message: '请输入登录名称', trigger: 'blur'},
					 { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					password:[
					{ required: true, message: '请输入登录名称', trigger: 'blur'},
					{ min: 3, max: 6, message: '长度在 3 到 6个字符', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			reset(){
				this.$refs.Ref.resetFields();
			},
			login(){
				this.$refs.Ref.validate(async valid=>{
					if(!valid) return
					const {data:res} =await this.$http.post('/login',this.loginForm);
					console.log(res)
					if(res.meta.status !==200) return this.$message.error('登陆失败');
					this.$message.success('登录成功');
					// 1.将登录成功之后的token,保存到客户端的sessionStorage中
					// 1.1项目除了登录之外的其他api接口，必须在登录之后才能访问
					// 1.2token只应该在当前网站打开期间生效，所以保存在sessionStorage
					// console.log(res)
					window.sessionStorage.setItem('token',res.data.token);
					// 2.通过编程式导航跳转到后台主页，路由地址是/home
					this.$router.push('/home')
				})
				
			}
		}
	}
</script>


<style scoped>
	.login_container{
		background-color: #2b4b6b;
		height: 100%;
	}
	.login_box{
		width: 450px;
		height: 300px;
		background-color: #fff;
		border-radius: 3px;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	.avatar_box{
		width: 130px;
		height: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		padding:10px;
		position: absolute;
		left:50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
	}
	.avatar_box img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #eee;
	}

	.login_form{
		position: absolute;
		bottom:0;
		width: 100%;
	}

	.btns{
		display: flex;
		justify-content: flex-end;
	}
</style>